
<template>
    <div style="width: 100vw;height: 100vh;background-color: #4b4ced;">
       <el-card id="form">
           <el-form label-width="80px" label-position="top" >
               <el-form-item label="订单号：" >
                   <el-input placeholder="请输入订单号" v-model="order.orderId"></el-input>
               </el-form-item>
               <el-form-item label="商品：">
                   <el-input placeholder="请输入商品名称" v-model="order.product"></el-input>
               </el-form-item>
               <el-form-item label="价格：">
                   <el-input placeholder="请输入价格" v-model="order.price"></el-input>
               </el-form-item>
               <el-button type="primary" @click="pay">去支付</el-button>
               <el-button type="primary" @click="random">生成时间戳订单号</el-button>
           </el-form>
       </el-card>
    </div>
    
    
</template>


<script setup>

    import {ref} from "vue";
    import axios from "axios";
    import qs from "qs";
    
    const order=ref({
        orderId:'',
        product:'',
        price:''
    });
    const pay=()=>{
        let data=qs.stringify(order.value)
        window.open(BASE_URL+'/alipay/pay?'+data,'_self')
    }
    const random=()=>{
        order.value.orderId=Date.now();
    }
    
</script>



<style scoped>
#form {
    background-image: url('../../public/1.jpg');
    background-size: 700px;
    width: 600px;
    height: 380px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 50px;
    box-sizing: border-box;
}

</style>